<template>
  <div id="aside">
    <MenuComponent :menu-items="menuConfig" />
  </div>
</template>

<script>
import MenuComponent from '@/components/MenuComponent.vue'
export default {
  name: 'AsideComponent',
  components:{
      MenuComponent
  },
  data(){
    return {
      menuConfig: [
        {
          index: '1',
          icon: 'el-icon-location',
          title: '导航一',
          children: [
            { index: '1-1', title: '选项1' },
            { index: '1-2', title: '选项2' },
            { index: '1-2', title: '选项2' },
            { index: '1-2', title: '选项2' },
            { index: '1-2', title: '选项2' },
            { index: '1-2', title: '选项2' },
            {
              index: '1-4',
              title: '选项4',
              children: [{ index: '1-4-1', title: '选项1' }]
            }
          ]
        },
        {
          index: '2',
          icon: 'el-icon-menu',
          title: '导航二'
        },
        {
          index: '3',
          icon: 'el-icon-document',
          title: '导航三',
          disabled: true
        },
        {
          index: '4',
          icon: 'el-icon-setting',
          title: '导航四'
        },
        {
          index: '5',
          icon: 'el-icon-location',
          title: '导航五',
          children: [
            { index: '1-1', title: '选项1' },
            { index: '1-2', title: '选项2' },
            { index: '1-2', title: '选项2' },
            { index: '1-2', title: '选项2' },
            { index: '1-2', title: '选项2' },
            { index: '1-2', title: '选项2' },
            {
              index: '1-4',
              title: '选项4',
              children: [{ index: '1-4-1', title: '选项1' }]
            }
          ]
        },
      ]
    }; 
  }
};
</script>

<style scoped>
#aside {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
</style>